<template>
    <div>
        <el-dialog v-dialogDrag title="修改轮播图" :visible="editShow" @close="dialogClose" :close-on-click-modal="false"
            width="40%">
            <el-form ref="editForm" :model="formFileds" :rules="rules" label-width="auto">
                <el-form-item label="名称：" prop="graphName">
                    <el-input type="text" v-model="formFileds.graphName"></el-input>
                </el-form-item>
                <el-form-item label="描述：" prop="description">
                    <el-input type="text" v-model="formFileds.description"></el-input>
                </el-form-item>
                <el-form-item label="图片：" prop="style">
                    <el-upload class="avatar-uploader" :action='actionpath' list-type="picture-card"
                        :show-file-list="false" :on-success="handleAvatarSuccess"
                         accept="image/*">
                        <img v-if="actionUrl" :src="actionUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="类型：" prop="type">
                    <el-select v-model="formFileds.type" @change="selectStatus">
                        <el-option label="机动车鉴定评估" value="机动车鉴定评估"></el-option>
                        <el-option label="价格鉴证" value="价格鉴证"></el-option>
                        <el-option label="保险评估" value="保险评估"></el-option>
                        <el-option label="资产评估" value="资产评估"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注：" prop="remark">
                    <el-radio v-model="formFileds.remark" label="true">启用</el-radio>
                    <el-radio v-model="formFileds.remark" label="false">禁用</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()" class="pull-right margin-l-25">确定
                    </el-button>
                    <el-button @click="dialogClose" class="pull-right">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { updateGraph } from '@/api/systemManage/carouselChartManage'
export default {
    name: 'carouselChartedit',
    //接受父组件
    props: {
        editShow: {
            type: Boolean
        },
        recorder:{
            type:Object
        }
    },

    data () {
        return {
            formFileds: {},
            actionpath: '/api/graph/styleUpload',
            actionUrl: '',
            rules: {
                graphName: [{
                    required: true,
                    message: '请输入轮播图名称',
                    trigger: 'blur'
                }],
                description: [{
                    required: true,
                    message: '请对该图进行简单描述',
                    trigger: 'blur'
                }],

                type: [{
                    required: true,
                    message: '请选择类别',
                    trigger: 'change,blur'
                }],
            },
            // 限制图片上传文件类型
            fileType:["png", "jpg", "jpeg"],
            // 运行上传文件大小，单位 M
            fileSize: 25,
            // 附件数量限制
            fileLimit: 1
        }
    },
    methods: {
        limitFileWH (E_width, E_height, file) {
            const _this = this
            let imgWidth = ''
            let imgHight = ''
            const isSize = new Promise(function (resolve, reject) {
                const width = E_width
                const height = E_height
                const _URL = window.URL || window.webkitURL
                const img = new Image()
                img.onload = function () {
                    imgWidth = img.width
                    imgHight = img.height
                    const valid = img.width === width && img.height === height
                    valid ? resolve() : reject()
                }
                img.src = _URL.createObjectURL(file)
            }).then(() => {
                return true
            }, () => {
                _this.$message.error({
                    message: '上传图片的尺寸应为' + E_width + 'px*' + E_height + 'px，当前上传图片的尺寸为：' + imgWidth + 'px*' + imgHight+'px',
                    btn: false
                })
                return false
            })
            return isSize
        },
        handlePictureCardPreview (file) {
            return new Promise((resolve, reject) => {

                // 调用[限制图片尺寸]函数
                this.limitFileWH(640, 300, file).then((res) => {
                    file.isFlag = res
                    if (file.isFlag) {
                        return resolve(true)
                    } else {
                        return reject(false)
                    }
                })
            })
        },
        handleAvatarSuccess (file) {
            this.actionUrl = file.data;
            this.formFileds.style = this.actionUrl;
        },
        selectStatus () {
            if (this.formFileds.type == '机动车鉴定评估') {
                this.formFileds.url = '/report'
            } else if (this.formFileds.type == '价格鉴证') {
                this.formFileds.url = '/jgjz'
            } else if (this.formFileds.type == '保险评估') {
                this.formFileds.url = '/bxpg'
            } else if (this.formFileds.type == '资产评估') {
                this.formFileds.url = '/zcpg'
            }
        },
        dialogClose () {
            this.$emit('dialogClose')
        },
        submitForm () {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    if (!this.formFileds.style) {
                        this.formFileds.remark = 'false'
                    }
                    updateGraph(this.formFileds).then((res) => {
                        this.$message.success('修改成功！')
                        this.$emit('getList')
                        this.$emit('dialogClose')
                    })
                }
                else {
                    return
                }
            });
        },

    },
    mounted () {
        this.actionUrl = this.recorder.style
        this.formFileds = Object.assign({},this.recorder)
        if(this.formFileds.remark==false){
            this.formFileds.remark='false'
        }else{
            this.formFileds.remark='true'
        }
    }
}
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
}

.avatar {
    width: 146px;
    height: 146px;
    object-fit: contain;
    display: block;
}
</style>
